<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <script>
        $(function(){

            // 什么是属性节点
            // 在编写html时,在HTML标签中添加的属性就是属性节点
            // <span name="it666"></span>
            // 在浏览器中找到span这个DOM元素之后,展开看到的都是属性
            // 在attributes属性中保持的所有内容都是属性节点
            
            //如何操作属性节点
             var span = document.getElementsByTagName("span")[0]
             console.log(span);
             //set attributes
             span.setAttribute("name","qzz")

             //get attributes
            console.log(span.getAttribute("name"))
            
             //属性和属性节点区别? 任何对象都有属性,DOM对象才有属性节点

            // .attr(name|pro|key,val|fn) 获取或者设置属性节点的值
            // 可以传递一个参数,获取属性节点的值,
                //注意!无论匹配多少个元素,只会返回第一个元素的值
            // 可以传递两个参数,设置属性节点的值
                //注意!无论匹配多少个元素,修改全部元素的值
                //注意!如果设置的属性节点不存在,系统会新增
            console.log($("span").attr("class"));
            $("span").attr("class","box")


            //.removeAttr() 为匹配的元素集合中的每个元素中移除一个属性（attribute）。
            // 会删除所有找到元素指定的属性节点
            // 只能接受一个参数,多个属性节点用空格隔开
            $("span").removeAttr("class name")
        })
    </script>
</head>
<body>
    <span name="it666" class="span1"></span>
</body>
</html>